<template>
  <!-- 人气推荐 -->
  <div class="popularity-container">
    <div class="popularity">
      <!-- 人气推荐头部 -->
      <div class="popularity-head">
        <h3>人气推荐</h3>
        <span class="active">编辑推荐</span>
        <span>热销总榜</span>
        <a href="#"><span>更多推荐 ></span></a>
      </div>

      <!-- 人气商品右边展示 -->
      <div class="popularity-left">
        <!-- 左边人气大商品 -->
        <div class="left-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/8aab5586f4ef01ad4c35e2e4f217a161.png?type=webp&quality=95&thumbnail=320x320&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>能除臭的空气浴室香氛 13种香型选择</span> </a>
            <p>￥14.9 <span>￥19.9</span></p>
          </div>
        </div>
      </div>

      <!-- 人气商品右边展示 -->
      <div class="popularity-right">
        <!-- 展示一个人气商品 -->
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
        <div class="right-show">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/95a416bf81adb62d13aabc83b6d8f01a.png?type=webp&quality=95&thumbnail=180y180&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>车载居家推荐 香氛除味除醛固体香膏</span> </a>
            <p>¥19.9 <span>￥129</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Populariry",
};
</script>

<style lang="less" scoped>
//人气推荐
.popularity-container {
  max-width: 100%;
  min-width: 1090px;
  height: 618px;
  padding: 60px 0 60px 0;
  background-color: #f4f0ea;

  .popularity {
    width: 1090px;
    height: 100%;
    margin: 0 auto;

    //人气推荐头部
    .popularity-head {
      position: relative;
      padding-bottom: 20px;

      h3 {
        font-size: 28px;
        display: inline-block;
        cursor: pointer;

        &:hover {
          color: #b4a078;
        }
      }
      span {
        font-size: 14px;
        height: 28px;
        vertical-align: middle;
        display: inline-block;
        width: 80px;
        text-align: center;
        margin-left: 25px;
        cursor: pointer;
      }
      .active {
        border-bottom: 2px #b4a078 solid;
        color: #b4a078;
      }

      a {
        position: absolute;
        right: 0;
        bottom: 0;
        text-decoration: none;
        color: #333;

        &:hover span {
          color: #b4a078;
        }
        &span {
          color: #333;
          font-size: 14px;
        }
      }
    }

    //人气推荐左边展示商品
    .popularity-left {
      float: left;
      width: 390px;
      height: 570px;
      background-color: #fff;
      margin-right: 10px;

      .left-show {
        &:hover img {
          transform: scale(1.05);
        }

        .show-img {
          width: 320px;
          height: 320px;
          padding: 40px 35px 40px 35px;
          border-bottom: 1px #f4f0ea solid;

          img {
            transition-property: all;
            transition-duration: 1000ms;
          }
        }

        //人气商品描述
        .describe {
          // height: 100%;

          a {
            text-decoration: none;

            span {
              display: block;
              width: 65%;
              text-align: center;
              height: 39px;
              font-size: 18px;
              margin: 0 auto;
              margin-top: 50px;
              margin-bottom: 20px;
              font-weight: 600;
              color: #333;

              &:hover {
                color: #b4a078;
              }
            }
          }

          p {
            font-size: 18px;
            color: #d4282d;
            text-align: center;

            span {
              font-size: 14px;
              display: inline;
              color: #999;
              text-decoration: line-through;
              font-weight: 400;
            }
          }
        }
      }
    }

    //人气推荐右边商品展示
    .popularity-right {
      float: left;
      width: 690px;
      height: 570px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      .right-show {
        width: 223px;
        height: 280px;
        background-color: #fff;

        &:hover img {
          transform: scale(1.05);
        }

        //新品图片
        .show-img {
          width: 100%;
          height: 180px;
          // background-color: #f4f4f4;
          text-align: center;
          border-bottom: 1px solid #f4f0ea;

          img {
            transition-property: all;
            transition-duration: 1000ms;
          }
        }

        //新品描述
        .describe {
          height: 92px;

          a {
            text-decoration: none;

            span {
              display: block;
              width: 65%;
              text-align: center;
              height: 39px;
              font-size: 13px;
              margin: 0 auto;
              margin-top: 30px;
              font-weight: 600;
              color: #333;
              &:hover {
                color: #b4a078;
              }
            }
          }

          p {
            font-size: 13px;
            color: #d4282d;
            text-align: center;

            span {
              display: inline;
              color: #999;
              text-decoration: line-through;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>
